<link rel='import' href='../../bower/core-overlay/core-overlay.html'>
<link rel='import' href='../../bower/core-signals/core-signals.html'>
<link rel='import' href='../../bower/paper-progress/paper-progress.html'>
<link rel='import' href='../../bower/paper-radio-button/paper-radio-button.html'>
<link rel='import' href='../../bower/paper-radio-group/paper-radio-group.html'>
<link rel='import' href='../../bower/polymer/polymer.html'>
<link rel='import' href='button.html'>

<polymer-element name='uproxy-cloud-install'>
  <template>
    <style>
    :host {
      text-align: start;
    }
    core-overlay {
      height: 100%;
      width: 100%;
      background-color: white;
    }
    paper-progress {
      width: 100%;
    }
    paper-radio-button {
      width: 100%;
      padding: 6px 12px !important;
    }
    .content {
      margin: 2em;
    }
    uproxy-button {
      background-color: #34AFCE;  /* blue */
      margin: 4px 0;
      padding: 0.5em;
      width: 100%;
      font-size: 14px;
    }
    paper-checkbox {
      margin: 10px 0 24px;
      font-size: 12px;
    }
    hr {
      margin: 20px 0;
      color: #eee;
      border-style: solid;
    }
    h1 {
      color: #003C48;
      font-weight: 400;
      font-size: 20px;
      line-height: 30px;
    }
    p {
      line-height: 1.75em;
      font-size: 12px;
    }
    #regionMenu {
      font-size: 12px;
    }
    .header-image {
      text-align: center;
    }
    .header-image img {
      margin: 0.5em 0 0;
      width: 120px;
    }
    .header-image img[src*="uproxy+digitalocean.svg"] {
      width: 180px;
    }
    paper-progress::shadow #activeProgress {
      background-color: #34AFCE !important;  /* blue */
    }
    paper-radio-button[checked]::shadow #onRadio {
      background-color: #34AFCE;  /* blue */
    }
    paper-radio-button[checked]::shadow #offRadio {
      border-color: #34AFCE;  /* blue */
    }
    uproxy-faq-link {
      color: #12A391;
    }
    .warning {
      font-weight: bold;
    }
    #cloudFailureFeedback {
      text-align: center;
      text-decoration: underline;
      cursor: pointer;
    }
    </style>
    <uproxy-state id="state"></uproxy-state>

    <core-overlay id='signUpOrSignInOverlay'>
      <uproxy-app-bar on-go-back='{{ back }}' color='#34AFCE'>
        {{ 'CREATE_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='content'>
        <div class='header-image'>
          <img src='../../icons/cloud/uproxy+digitalocean.svg'>
        </div>
        <h1>{{ 'CLOUD_INSTALL_GET_STARTED_TITLE' | $$(model.globalSettings.language) }}</h1>
        <div id='getStartedMessage'></div>
        <uproxy-button raised on-tap='{{ launchDigitalOceanSignup }}'>
          {{ 'CREATE_A_NEW_ACCOUNT' | $$(model.globalSettings.language) }}
        </uproxy-button>
        <uproxy-button raised on-tap='{{ showCreateServerOverlay }}'>
          {{ 'I_HAVE_AN_ACCOUNT' | $$(model.globalSettings.language) }}
        </uproxy-button>
        <hr>
        <h1>{{ 'CLOUD_INSTALL_EXISTING_SERVER_TITLE' | $$(model.globalSettings.language) }}</h1>
        <p id='existingServerMessage'></p>
      </div>
    </core-overlay>

    <core-overlay id='createServerOverlay'>
      <uproxy-app-bar on-go-back='{{ back }}' color='#34AFCE'>
        {{ 'CREATE_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='content'>
        <div class='header-image'>
          <img src='../../icons/cloud/uproxy+digitalocean.svg'>
        </div>
        <h1>{{ 'CLOUD_INSTALL_LOGIN_TITLE' | $$(model.globalSettings.language) }}</h1>
        <div>
          <paper-radio-group id='regionMenu' selected='sgp1'>
            <!-- TODO: get available regions from DigitalOcean -->
            <paper-radio-button name='sgp1' label='{{ "ASIA_SINGAPORE" | $$(model.globalSettings.language) }}'></paper-radio-button>
            <paper-radio-button name='blr1' label='{{ "ASIA_BANGALORE" | $$(model.globalSettings.language) }}'></paper-radio-button>
            <paper-radio-button name='ams2' label='{{ "EUROPE_AMSTERDAM" | $$(model.globalSettings.language) }}'></paper-radio-button>
            <paper-radio-button name='nyc2' label='{{ "NORTH_AMERICA_NEW_YORK" | $$(model.globalSettings.language) }}'></paper-radio-button>
          </paper-radio-group>
        </div>
        <div id='createServerMessage'></div>
        <!-- TODO: add learn more links -->
        <uproxy-button raised on-tap='{{ createServer }}'>
          {{ 'CREATE_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
        </uproxy-button>
      </div>
    </core-overlay>

    <core-overlay id='installingOverlay'>
      <uproxy-app-bar color='#34AFCE' disableback="true">
        {{ 'CREATING_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='content'>
        <div class='header-image'>
          <img src='../../icons/cloud/create.svg'>
        </div>
        <h1>{{ 'CLOUD_INSTALL_INSTALLING_TITLE' | $$(model.globalSettings.language) }}</h1>
        <p class="warning">{{ 'CLOUD_INSTALL_INSTALLING_WARNING' | $$(model.globalSettings.language) }}</p>
        <p>{{ 'CLOUD_INSTALL_INSTALLING_MESSAGE' | $$(model.globalSettings.language) }}</p>
      </div>
    </core-overlay>

    <core-overlay id='successOverlay'>
      <uproxy-app-bar on-go-back='{{ back }}' color='#34AFCE'>
        {{ 'CREATE_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='content'>
        <div class='header-image'>
          <img src='../../icons/cloud/success.svg'>
        </div>
          <h1>{{ 'CLOUD_INSTALL_SUCCESS_TITLE' | $$(model.globalSettings.language) }}</h1>
        <!-- TODO: show IP address -->
        <p>{{ 'CLOUD_INSTALL_SUCCESS_MESSAGE' | $$(model.globalSettings.language) }}</p>
        <!-- TODO: add start getting access button -->
        <uproxy-button on-tap='{{ closeOverlays }}'>{{ 'CONTINUE' | $$(model.globalSettings.language) }}</uproxy-button>
      </div>
    </core-overlay>

    <core-overlay id='failureOverlay'>
      <uproxy-app-bar on-go-back='{{ back }}' color='#34AFCE'>
        {{ 'CREATE_A_CLOUD_SERVER' | $$(model.globalSettings.language) }}
      </uproxy-app-bar>

      <div class='content'>
        <div class='header-image'>
          <img src='../../icons/cloud/error-circle-ic.svg'>
        </div>
        <h1>{{ 'CLOUD_INSTALL_ERROR_TITLE' | $$(model.globalSettings.language) }}</h1>
        <p>{{ 'DIGITAL_OCEAN_ERROR_MESSAGE' | $$(model.globalSettings.language) }}</p>
        <uproxy-button raised on-tap='{{ createServer }}'>
          {{ 'TRY_AGAIN' | $$(model.globalSettings.language) }}
        </uproxy-button>
        <uproxy-button raised on-tap='{{ launchDigitalOceanSettings }}'>
          {{ 'LAUNCH_DIGITAL_OCEAN_SETTINGS' | $$(model.globalSettings.language) }}
        </uproxy-button>
        <p id="cloudFailureFeedback" on-tap="{{ launchFeedback }}">
          {{ 'REPORT_ERROR' | $$(model.globalSettings.language) }}
        </p>
      </div>
    </core-overlay>

  </template>
  <script src='cloud-install.js'></script>
</polymer-element>
